<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-menu :iconList="menuList"></home-menu>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script type="text/ecmascript-6">
  import { mapState } from 'vuex'
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeMenu from './components/Menu'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend from './components/Weekend'
  import axios from 'axios'

  export default {
    data () {
      return {
        swiperList: [],
        menuList: [],
        recommendList: [],
        weekendList: [],
        lastCity: ''
      }
    },
    mounted () {
      this.lastCity = this.city
      this.getInfo()
    },
    activated () {
      if (this.lastCity !== this.city) {
        this.lastCity = this.city
        this.getInfo()
      }
    },
    computed: {
      ...mapState(['city'])
    },
    methods: {
      getInfo () {
        axios.get('/api/index.json')
          .then((data) => {
              if (data.data.ret) {
                const res = data.data.data
                this.swiperList = res.swiperList
                this.recommendList = res.recommendList
                this.menuList = res.iconList
                this.weekendList = res.weekendList
              }
            }
          )
      }
    },
    components: {
      HomeHeader,
      HomeSwiper,
      HomeMenu,
      HomeRecommend,
      HomeWeekend,
    }
  }
</script>

<style>

</style>
